<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>DOM</title>

        <script>
            function fun1() {
                var ele = document.getElementById("username");
                ele.value = "12345";
            }

            function fun2() {
                var ele = document.getElementsByTagName("input");
                for (i = 0; i < ele.length; ++i) {
                    console.log(ele[i]);
                }
            }
        </script>
    </head>
    <body>
        <div id="div01">
            <input type="text" class="a" id="username" name="aaa" />
            <input type="text" class="b" id="password" name="aaa" />
            <input type="text" class="a" id="email" />
            <input type="text" class="b" id="address" />
        </div>
        <hr />
        <input
            type="button"
            value="根据id获取指定元素"
            onclick="fun1()"
            id="btn01"
            name="我是name"
        />
        <input
            type="button"
            value="根据标签名获取多个元素"
            onclick="fun2()"
            id="btn02"
        />
        <input
            type="button"
            value="根据name属性值获取多个元素"
            onclick="fun3()"
            id="btn03"
        />
        <input
            type="button"
            value="根据class属性值获得多个元素"
            onclick="fun4()"
            id="btn04"
        />
        <hr />
        <input
            type="button"
            value="通过父元素获取子元素"
            onclick="fun5()"
            id="btn05"
        />
        <input
            type="button"
            value="通过子元素获取父元素"
            onclick="fun6()"
            id="btn06"
        />
        <input
            type="button"
            value="通过当前元素获取兄弟元素"
            onclick="fun7()"
            id="btn07"
        />
    </body>
</html>
